<template>
  <el-row class="ik-list-pagination" :gutter="0">

    <el-col :span="14" class="ik-list-pagination-group">
      <!-- 分页 -->
      <span class="svg-container ik-list-pagination-btn">
        <svg-icon icon-class="page-first" @click="firstPage()" />
      </span>
      <span class="svg-container ik-list-pagination-btn">
        <svg-icon icon-class="page-previous" @click="previousPage()" />
      </span>
      <span v-show="!pageNoChange" class="ik-list-pagination-info" @click="pageNoChangeMethod">
        第 {{ pageNoValue }} 页，共 {{ pageCountValue }} 页
      </span>
      <span v-show="pageNoChange" class="ik-list-pagination-info">
        跳转至第
        <el-input-number
          ref="ik_list_pagination_pageNo"
          v-model="pageNoValue"
          class="ik-list-pagination-input"
          size="medium"
          type="number"
          :min="1"
          :max="pageCountValue"
          :step="1"
          @blur="pageNoChange = false"
        />
        页
      </span>
      <span class="svg-container ik-list-pagination-btn">
        <svg-icon icon-class="page-next" @click="nextPage()" />
      </span>
      <span class="svg-container ik-list-pagination-btn">
        <svg-icon icon-class="page-last" @click="lastPage()" />
      </span>

      <!-- 分页 -->
      <span v-show="!pageSizeChange" class="ik-list-pagination-info" @click="pageSizeChangeMethod">
        每页 {{ pageSizeValue }} 条记录
      </span>
      <!-- 分页 -->
      <span v-show="pageSizeChange" class="ik-list-pagination-info">
        每页
        <el-select
          ref="ik_list_pagination_pageNo"
          v-model="pageSizeValue"
          class="ik-list-pagination-pagesize"
          size="medium"
          placeholder="请选择"
        >
          <el-option
            v-for="item in options"
            :key="item.value"
            :label="item.label"
            :value="item.value"
          />
        </el-select>
        条记录
      </span>
    </el-col>
    <el-col :span="6" class="ik-list-enterprise-info">
      <span style="float: left">{{ sysTitle }}</span>
    </el-col>
    <el-col :span="4" class="ik-list-data-info">
      <span style="float: right;margin-right: 20px">共{{ pageCountValue }}页，{{ totalCount }}条记录</span>
    </el-col>
  </el-row>
</template>

<script>
export default {
  name: 'IkPagination',
  props: {
    pageNo: {
      type: Number,
      default: 1
    },
    pageSize: {
      type: Number,
      default: 10
    },
    totalCount: {
      type: Number,
      default: 1
    }
  },
  data() {
    return {
      sysTitle: this.$store.getters['setting/getTitle'],
      // 显示参数
      pageNoChange: false,
      pageSizeChange: false,
      // 分页参数
      pageNoValue: 1,
      pageSizeValue: 10,
      pageCountValue: 1,
      options: [
        { 'value': 5, 'label': '5' },
        { 'value': 10, 'label': '10' },
        { 'value': 20, 'label': '20' },
        { 'value': 50, 'label': '50' },
        { 'value': 100, 'label': '100' }
      ]
    }
  },
  watch: {
    // 传入参数同步 - 当前页
    pageNo: {
      handler(newVal, oldVal) {
        this.pageNoValue = newVal
      }
    },
    // 传入参数同步 - 页记录数
    pageSize: {
      handler(newVal, oldVal) {
        this.pageSizeValue = newVal
        this.pageCountValue = Math.ceil(this.totalCount / this.pageSizeValue)
      }
    },
    // 传入参数同步 - 总记录数
    totalCount: {
      handler(newVal, oldVal) {
        this.pageCountValue = Math.ceil(this.totalCount / this.pageSizeValue)
      }
    },
    // 当前页输入框改变
    pageNoValue: {
      handler(newVal, oldVal) {
        this.pageNoChange = false
        this.pageChange(newVal, this.pageSizeValue)
      }
    },
    // 每页条数下拉框改变
    pageSizeValue: {
      handler(newVal, oldVal) {
        this.pageSizeChange = false
        this.pageNoValue = 1
        this.pageCountValue = Math.ceil(this.totalCount / this.pageSizeValue)
        this.pageChange(this.pageNoValue, this.pageSizeValue)
      }
    }
  },
  created() {
    this.pageSizeValue = this.pageSize
  },
  methods: {
    // 分页变更方法啊
    pageChange(pageNo, pageSize) {
      this.$emit('pageChangeMethod', pageNo, pageSize)
    },
    // page
    pageNoChangeMethod() {
      // 显示输入框
      this.pageNoChange = true
      // 输入框获取焦点
      this.$refs.ik_list_pagination_pageNo.focus()
    },
    //
    pageSizeChangeMethod() {
      // 显示下拉
      this.pageSizeChange = true
      // 输入框获取焦点
      this.$refs.ik_list_pagination_pageNo.focus()
    },
    // 首页
    firstPage() {
      this.pageNoValue = 1
    },
    // 前页
    previousPage() {
      if (this.pageNoValue > 1) {
        this.pageNoValue -= 1
      }
    },
    // 后页
    nextPage() {
      if (this.pageNoValue < this.pageCountValue) {
        this.pageNoValue += 1
      }
    },
    // 尾页
    lastPage() {
      this.pageNoValue = this.pageCountValue
    }
  }
}
</script>

<style scoped>
.ik-list-pagination {
  background-color: #1482f0;
  color: #FFFFFF;
  height: 40px;
}

/* 分页信息 */
.ik-list-pagination-input {
  width: 120px;
  height: 32px;
  background-color: #1482f0;
  color: #FFFFFF;
}
.ik-list-pagination-pagesize {
  width: 70px;
  height: 32px;
}
.ik-list-pagination-btn {
  padding-left: 10px;
  padding-right: 10px;
  background-color: #1482f0;
  cursor: pointer;
  line-height: 40px;
  font-size: 20px;
}
.ik-list-pagination-btn :hover {
  background-color: #1482f0;
  color: #000000;
}
.ik-list-pagination-info {
  font-size: 14px;
  line-height: 40px;
}

/* 企业信息 */
.ik-list-enterprise-info {
  padding-left: 10px;
  font-size: 14px;
  line-height: 40px;
}

/* 记录信息 */
.ik-list-data-info {
  font-size: 14px;
  line-height: 40px;
}
</style>
